<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<title>左右移动</title>
<style>
select{
width: 70px;height: 150px;
}
input[type=button]{width: 70px;}
#opt{margin: 90px 10px 0;}
.box{width: 80%;margin:0 auto;background-color: black;}
.box div{float: left;}

</style>

</head>
<body>
<div class="box">
<div id="left">
	<p>可选项</p>
<select multiple="multiple">
<option>增加</option>
<option>删除</option>
<option>修改</option>
</select>
</div>
<div id="opt">
	<input id="toRight" type="button" value="增加" /><br>
	<input id="toLeft" type="button" value="删除" /><br>
	<input id="toAllRight" type="button" value="增加全部" /><br>
	<input id="toAllLeft" type="button" value="删除全部" /><br>
</div>
<div id="right">
	<p>已选项</p>
	<select multiple="multiple">
		<!-- <option>增加</option> -->
	</select>
</div>
</div>
<script>
	//调入口函数
$(function(){
	//增加
	// console.log($('option'))
	$('#toRight').click(function(){
		//在 id=right中 里找到 select
		$('#right>select').append($('option:selected'))
		
		// console.log($(this));
		// console.log($('option:selected'));
		
	})
	//删除
	$('#toLeft').click(function(){
		$('#left>select').append($('option:selected'))
		
	})
})	
	
	
</script>



</body>
</html>
